<template>
    <view class="detail">
        <view class="logo" :style="'top:' + statusBarHeight + 'px'">
            <image @click="goBack()" src="@/static/left.png"></image>
        </view>
        
        <view class="hi" :style="'margin-top:' + navHeight + 'px'"></view>
        
        <view class="title">{{ info.title }}</view>
        
        <view class="desc">
            <u-parse :content="info.content"></u-parse>
        </view>
        
    </view>
</template>

<script>
    import { systemInfo } from '@/common/mixin.js'
    export default {
        mixins: [systemInfo],
        data() {
            return {
                id: 0,
                info: {
					video_url: ''
				},

            }
        },
        onLoad(options) {
            this.id = options.id
            this.getSystemInfo();
            this.getInfo();
        },
        methods: {
            goBack() {
                uni.navigateBack();
            },
            getInfo() {
                let that = this
                that.$API.getNewsInfo({id: that.id}).then(res => {
                    that.info = res.data
                });
            }
        },
        onShareAppMessage() {
            return {
              title: this.info.title,
              path: '/pages/index/detail?id=' + this.info.id
            }
        },
        onShareTimeline() {
            return {
              title: this.info.title,
              path: '/pages/index/detail?id=' + this.info.id
            }
        }
    }
</script>

<style>
page {
    background: linear-gradient(180deg, #F6FBEE 0%, #C5E5E1 100%);
}
.detail {
    background: linear-gradient(180deg, #F6FBEE 0%, #C5E5E1 100%);
    padding-bottom: 150rpx;
}
</style>
<style lang="scss">
    .logo {
        position: relative;
        left: 38rpx;
        display: flex;
        align-items: center;
        padding-top: 5rpx;
        image {
            width: 52rpx;
            height: 52rpx;
            margin-right: 12rpx;
            margin-top: 15rpx;
        }
    }
    .hi {
        position: relative;
    }
    .video {
        position: relative;
        width: 670rpx;
        height: 380rpx;
        margin: 20rpx auto;
        video {
            width: 670rpx;
            height: 380rpx;
        }
    }
    .title {
        width: 670rpx;
        font-size: 36rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 48rpx;
        letter-spacing: 1px;
        margin: 0 auto 0 auto;
    }
    .desc {
        width: 670rpx;
        line-height: 2;
        margin: 38rpx auto 0 auto;
    }
    .u-page {
        position: relative;
        width: 670rpx;
        margin: 0 auto;
        .u-list {
            view {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
                .u-list-item {
                    width: 670rpx;
                    height: 460rpx;
                    overflow: hidden;
                    margin-bottom: 40rpx;
                    image {
                        width: 670rpx;
                        height: 284rpx;
                        border-radius: 32rpx 32rpx 0 0;
                    }
                    .s1 {
                        width: 670rpx;
                        height: 176rpx;
                        background: #FFFFFF;
                        border-radius: 0rpx 0rpx 32rpx 32rpx;
                        .title {
                            width: 630rpx;
                            height: 36rpx;
                            font-size: 30rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            line-height: 36rpx;
                            padding-top: 28rpx;
                            padding-left: 20rpx;
                        }
                        .desc {
                            width: 630rpx;
                            height: 72rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                            line-height: 36rpx;
                            overflow: hidden;
                            padding-top: 12rpx;
                            padding-left: 20rpx;
                            text-overflow: ellipsis;
                            display:-webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient:vertical;
                        }
                    }
                }
            }
        }
    }
</style>
